<template>
  <div class="hello">
    <h1>{{ $store.state.count }}</h1>

    <button @click="addClick(1)">+</button>
    <button @click="reduceClick(1)">-</button>

    <button @click="async_add(1)">异步添加</button>
    <button @click="async_reduce(1)">异步减少</button>

    <h1>我是getters {{ count }}</h1>
  </div>
</template>

<script>
import {mapMutations, mapActions, mapGetters} from 'vuex'
export default {
  name: 'HelloWorld',
  computed: {
    // count() {
    //   return this.$store.getters.getCount
    // }
    // 简化实例的计算属性到全局的计算属性映射
    ...mapGetters({
        count: 'getCount'
    })
  },
  data () {
    return {
      msg: 'hello页面'
    }
  },
  methods: {
    // addClick(n) {
    //   console.log('addClick')
    //   this.$store.commit('mutationAdd', n)
    // },
    // reduceClick(n) {
    //   console.log('reduceClick')
    //   this.$store.commit('mutationReduce', n)
    // },

    // 简化 自动将方法映射到 mutations同步函数上，调用时会传递state和参数
    ...mapMutations({
      addClick: 'mutationAdd'
    }),
    ...mapMutations({
      reduceClick: 'mutationReduce'
    }),

    // async_add(n) {
    //   console.log('async_add')
    //   this.$store.dispatch('actionsAdd', n)
    // },
    // async_reduce(n) {
    //   console.log('async_reduce')
    //   this.$store.dispatch('actionsReduce', n)
    // }
    // 简化 自动将方法映射到 actions异步函数上，调用时会传递context和参数
    ...mapActions({
      async_add: 'actionsAdd'
    }),
    ...mapActions({
      async_reduce: 'actionsReduce'
    })
  },
  mounted() {
    console.log(this.$store)
    console.log(this.$router)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  /* list-style-type: none; */
  padding: 0;
}
li {
  /* display: inline-block; */
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
